<template>
  <div id="bartab">
    <ul>
      <li v-for="i in task" :key="i" :class="{ gif: i.gif , active: i.inx == bartabInx}">
        <div v-if="i.gif" @click="randomWork">
          <div class="bartab-box">
            <img :src="i.url" />
          </div>
          <p>{{ i.text }}</p>
        </div>
        <div v-else-if="i.inx != 3" @click="routers(i.to)">
          <div class="bartab-box">
            <img :src="i.url" />
          </div>
          <p>{{ i.text }}</p>
        </div>
        <a v-else :href="i.to">
          <div class="bartab-box">
            <img :src="i.url" />
          </div>
          <p>{{ i.text }}</p>
        </a>
      </li>
    </ul>
    <div v-if="models_table==1">
      <div class="show_boxs" @click="hide_alert()"></div>
      <div class="model_alert">
        <ul class="platform" v-if="taskindex == -1">
          <li
            v-for="tab in platforms_tab"
            :key="tab"
            :class="{ on: platforms_tab_txt ==  tab.platform_tag}"
            @click="platforms_tab_txt = tab.platform_tag, platforms_tab_id = tab.platform_id"
          >{{ tab.platform_name }}</li>
        </ul>
        <ul class="platform" v-else>
          <li
            v-for="tab in platforms_tab"
            :key="tab"
            :class="{ on: platforms_tab_txt ==  tab.platform_tag}"
          >{{ tab.platform_name }}</li>
        </ul>
        <div class="hint">
          <img src="../../images/deng.png" alt />
          <span>请选择自动抢单的任务号</span>
        </div>
        <div class="tasknum" v-if="taskindex == -1">
          <div v-if="tasknum == ''" style="color:red">{{ tasknum1 }}</div>
          <div
            v-else
            v-for="(task,index) in tasknum"
            :key="index"
            @click="Robtask(index,task.consumer_id)"
            :data-id="task.consumer_id"
          >
            {{ task.login }}
            <p v-if="taskindex == index && time > 0">
              <span>{{ time }}</span>
              <span>s抢单中...</span>
            </p>
            <!--<span>{{ time }}</span>-->
          </div>
        </div>
        <div class="tasknum" v-else>
          <div v-if="tasknum == ''" style="color:red">{{ tasknum1 }}</div>
          <div v-else v-for="(task,index) in tasknum" :key="index" :data-id="task.consumer_id">
            {{ task.login }}
            <p v-if="taskindex == index && time > 0">
              <span>{{ time }}</span>
              <span>s抢单中...</span>
            </p>
            <!--<span>{{ time }}</span>-->
          </div>
        </div>
      </div>
    </div>
    <!-- @click.stop='privilegeTask(0, tab.platform_id)' -->
  </div>
</template>


<script>
import api from "../../utils/api";
import { setTimeout } from "timers";
export default {
  name: "bartab",
  data() {
    return {
      randomWorkShow: true,
      consumer_id: 0,
      models_table: 0,
      platforms_tab: [],
      platforms_tab_id: "",
      platforms_tab_txt: "",
      tasknum: [],
      tasknum1: "请绑定任务号",
      taskindex: -1,
      time: 0,
      domin: localStorage.getItem("domin"),
      task: [
        {
          url: require("@/images/bartab-1a.png"),
          text: "首页",
          to: "/",
          inx: 1
        },
        {
          url: require("@/images/bartab-2a.png"),
          text: "我的任务",
          to: "/task/my_tasks",
          inx: 2
        },
        {
          url: require("@/images/zdqd.png"),
          text: "自动抢单",
          to: "",
          gif: true
        },
        {
          url: require("@/images/logohd.png"),
          text: "热门活动",
          to:
            localStorage.getItem("activity") +
            "?token=" +
            localStorage.getItem("token") +
            "&game=1",
          inx: 3
        },
        {
          url: require("@/images/bartab-3a.png"),
          text: "个人中心",
          to: "/task/Myself",
          inx: 4
        }
      ],
      bartabInx: localStorage.getItem("bartabInx")
    };
  },
  async created() {
    var that = this;
    await api.request("/platforms", "get", {}).then(function(res) {
      that.platforms_tab = res.data.data;
      for (let i in res.data.data) {
        if (res.data.data[i].platform_tag == "taobao") {
          that.platforms_tab_txt = res.data.data[i].platform_tag;
          that.platforms_tab_id = res.data.data[i].platform_id;
        }
      }
    });
  },
  methods: {
    hide_alert() {
      this.models_table = 0;
    },
    routers(link) {
      this.$router.push({
        path: link
      });
    },
    tasknumber() {
      var that = this;
      that.tasknum = [];
      api
        .request("/consumers", "get", { platform_id: this.platforms_tab_id })
        .then(function(res) {
          let task = res.data.data;
          for (var i = 0; i < task.length; i++) {
            if (task[i].status.val == 1) {
              that.tasknum.push(task[i]);
            }
          }
        });
    },
    async randomWork() {
      let param = {};
      api.request("/getSysAttr", "get", param).then(res => {
        console.log("自动抢单", res.data.data.auto_snatch);
        if (res.data.data.auto_snatch == 1) {
          this.models_table = 1;
        } else {
          this.$toast(res.data.data.msg);
        }
      });

      //   this.$toast("自动抢升级中，请手动去大厅领取任务");
    },
    Robtask(index, id) {
      //   this.$toast("自动抢升级中，请手动去大厅领取任务");
      let Time = this.time;
      if (Time <= 0) {
        this.taskindex = index;
        let taskid = id;
        let that = this;
        var TIME = localStorage.getItem("TIME");
        that.time = TIME;
        that.send();
        let param = {
          consumer_id: taskid,
          platform_id: that.platforms_tab_id
        };
        api.request("/works/randomWork", "post", param).then(
          function(resp) {
            let id1 = resp.data.data.work_user_id;
            that.taskindex = -1;
            if (window.location.href.indexOf("task") != -1) {
              that.time = 0;
              that.$router.push({
                path: `detail/${id1}`
              });
            } else {
              that.time = 0;
              that.$router.push({
                path: `task/detail/${id1}`
              });
            }
          },
          function(err) {
            if (err.errorCode == 95515) {
              // that.$toast(err.error);
              that.taskindex = -1;
              let id2 = err.error.work_user_id;
              if (window.location.href.indexOf("task") != -1) {
                that.time = 0;
                that.$router.push({
                  path: `detail/${id2}`
                });
              } else {
                that.time = 0;
                that.$router.push({
                  path: `task/detail/${id2}`
                });
              }
              that.time = 0;
              that.models_table = 0;
            } else if (err.errorCode == 95501) {
              // that.$toast(err.error);
              that.taskindex = -1;
              that.time = 0;
              // that.models_table = 0;
            } else {
              if (that.time > 3) {
                setTimeout(function() {
                  api.request("/works/randomWork", "post", param).then(
                    function(resp) {
                      let id1 = resp.data.data.work_user_id;
                      that.taskindex = -1;
                      if (window.location.href.indexOf("task") != -1) {
                        that.time = 0;
                        that.$router.push({
                          path: `detail/${id1}`
                        });
                      } else {
                        that.time = 0;
                        that.$router.push({
                          path: `task/detail/${id1}`
                        });
                      }
                    },
                    function(err) {
                      if (that.time > 3) {
                        setTimeout(function() {
                          api.request("/works/randomWork", "post", param).then(
                            function(resp) {
                              let id1 = resp.data.data.work_user_id;
                              that.taskindex = -1;
                              if (window.location.href.indexOf("task") != -1) {
                                that.time = 0;
                                that.$router.push({
                                  path: `detail/${id1}`
                                });
                              } else {
                                that.time = 0;
                                that.$router.push({
                                  path: `task/detail/${id1}`
                                });
                              }
                            },
                            function(err) {
                              that.$toast("暂时没有匹配的任务");
                              that.taskindex = -1;
                              that.time = 0;
                              // that.models_table = 0;
                            }
                          );
                        }, 3000);
                      } else {
                        that.$toast("暂时没有匹配的任务");
                        that.taskindex = -1;
                        that.time = 0;
                        // that.models_table = 0;
                      }
                    }
                  );
                }, 3000);
              } else {
                that.$toast("暂时没有匹配的任务");
                that.taskindex = -1;
                that.time = 0;
                // that.models_table = 0;
              }
            }
          }
        );
      }
    },
    send() {
      let that = this;
      let Time = that.time;
      window.clearInterval(interval);
      var interval = window.setInterval(() => {
        that.time--;
        if (that.time <= 0) {
          that.time = 0;
          that.taskindex = -1;
          window.clearInterval(interval);
        }
        localStorage.setItem("sendTime", that.time);
      }, 1000);
    }
  },
  watch: {
    async platforms_tab_id(platform) {
      this.tasknumber();
    }
  }
};
</script>

<style>
#bartab {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 99;
  height: 1.5rem;
  background: #fff;
  border-top: 0.02rem solid #ddd;
  box-shadow: 0 0 0.2rem #ddd;
}

#bartab ul {
  display: flex;
}

#bartab ul li {
  flex: 1;
  text-align: center;
  position: relative;
  padding-top: 0.3rem;
}

#bartab ul li p {
  margin-top: 0.1rem;
  font-size: 0.35rem;
  color: #bcbcbc;
}

#bartab ul li.active p {
  color: #ff9815;
}
#bartab ul li.active img {
  filter: none;
}
#bartab ul li img {
  display: block;
  height: 0.5rem;
  margin: 0 auto;
  filter: grayscale(100%);
}
#bartab ul li.gif img {
  width: 1rem;
  height: auto;
  top: 0rem;
  left: 0.5rem;
  -webkit-filter: none;
  filter: none;
  position: absolute;
}
.bartab-box {
  height: 0.5rem;
}
.show_boxs {
  position: fixed;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
}
.model_alert {
  position: fixed;
  top: 50%;
  width: 9rem;
  height: 10.5rem;
  left: 50%;
  z-index: 99999;
  margin-left: -4.5rem;
  margin-top: -5.25rem;
  -webkit-border-radius: 0.3rem;
  -moz-border-radius: 0.3rem;
  border-radius: 0.3rem;
  background-color: #fff;
  /* background: url("../images/bgs.png") no-repeat; */
  background-size: cover;
}
.model_alert .platform {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  height: 17%;
  justify-content: center;
}
#bartab .model_alert .platform li {
  font-size: 0.5rem;
  flex: none;
  width: 28%;
  padding-bottom: 2%;
  border-bottom: 2px solid transparent;
}
#bartab .model_alert .platform li.on {
  color: #ff8e0c;
  border-color: #ff8e0c;
}
.hint {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.6rem;
  margin-top: 0.3rem;
}
.hint img {
  width: 0.5rem;
  display: inline-block;
}
.hint span {
  color: #ff8e0c;
  font-size: 0.4rem;
}
#bartab .tasknum {
  width: 74%;
  height: 5.8rem;
  position: relative;
  padding: 0 13%;
  margin-top: 7%;
  overflow-y: scroll;
}
#bartab .tasknum div {
  margin-bottom: 9%;
  font-size: 0.5rem;
  color: #b9b9b9;
}
#bartab .tasknum div p {
  display: inline-block;
  padding: 0.1% 1%;
  background-color: #fef6e3;
  color: #ff8e0c;
  font-size: 0.4rem;
  margin-left: 7%;
}
</style>
